function Snake(el){
 this.el=el
 this.len=20
 this.snakeObj=[
     {x:3,y:2,color:'red',ele:null},
{x:2,y:2,color:'blue',ele:null},
{x:1,y:2,color:'blue',ele:null}
]
this.direction='right'
}
Snake.prototype.remove=function(){
    for(let i=0;i<this.snakeObj.length;i++){
        if(this.snakeObj[i].ele){
            this.el.removeChild(this.snakeObj[i].ele)
        }
    }
}
Snake.prototype.create=function(){
        this.remove()
        for(let i=0;i<this.snakeObj.length;i++){
            let divObj=document.createElement('div')
            divObj.style.width=this.len+'px'
            divObj.style.height=this.len+'px'
            divObj.style.position='absolute'
            divObj.style.left=this.snakeObj[i].x*this.len+'px'
            divObj.style.top=this.snakeObj[i].y*this.len+'px'
            divObj.style.background=this.snakeObj[i].color
            this.snakeObj[i].ele=divObj
            this.el.appendChild(divObj)
        }
}
Snake.prototype.move=function(){
    for (let i = this.snakeObj.length - 1; i>0; i--) {
        // console.log(this.snakeObj[i])
        this.snakeObj[i].x = this.snakeObj[i-1].x
        this.snakeObj[i].y = this.snakeObj[i-1].y
    }
    switch(this.direction){
        case 'top':
            this.snakeObj[0].y -= 1
            break;
        case 'bottom':
            this.snakeObj[0].y += 1
            break;
        case 'left':
            this.snakeObj[0].x -= 1
            break;
        case 'right':
            this.snakeObj[0].x += 1
            break;
    }
    this.create()
}